<template>
  <div class="table-transfer">
    <table-col ref="left" :data="data1" title="所有课程" />
    <div>
      <p>
        <el-button icon="el-icon-arrow-left" circle @click="remove" />
      </p>
      <p>
        <el-button icon="el-icon-arrow-right" circle @click="add" />
      </p>
    </div>
    <table-col ref="right" :data="data2" title="已选课程" />
  </div>
</template>

<script>
import TableCol from './TableCol'
import { getCourse } from '@/api/common'

export default {
  name: 'TableTransfer',
  components: { TableCol },
  props: {
    dataParams: {
      type: Object,
      default: () => {}
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      allData: []
    }
  },
  computed: {
    data1() {
      return this.allData.filter((item1) => !this.value.find((item2) => item1.uuid === item2))
    },
    data2() {
      return this.allData.filter((item1) => this.value.find((item2) => item1.uuid === item2))
    }
  },
  created() {
    getCourse(this.dataParams).then((res) => {
      this.allData = res.data
    })
  },
  methods: {
    add() {
      const value = [...this.value, ...this.$refs.left.multipleSelection]
      this.$emit('input', value)
      this.$refs.left.clearMultipleSelection()
    },
    remove() {
      const value = this.value.filter(
        (item1) => !this.$refs.right.multipleSelection.find((item2) => item1 === item2)
      )
      this.$emit('input', value)
      this.$refs.right.clearMultipleSelection()
    },
    clearQuery() {
      this.$refs.left.clearQuery()
      this.$refs.right.clearQuery()
    },
    getSelected() {
      return JSON.parse(JSON.stringify(this.data2))
    }
  }
}
</script>

<style lang="less" scoped>
.table-transfer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
